<template>
  <div id="ct">
    <button @click="resize">resize</button>
    <div class="chart" ref="chart" id="chart2020"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { shallowRef } from "vue";
import { Format } from "../../utils/functions/date";
export default {
  setup() {
    let charts = shallowRef({});
    return { charts };
  },
  data() {
    return {};
  },
  methods: {
    resize() {
      // setTimeout(() => {
      //     this.chart.resize();
      // }, 200);
      // console.log(this.asd);
      const op = this.charts["asd"].getOption();
      op.color = ["#409EFF"];
      this.charts["asd"].setOption(op);
    },
  },
  mounted() {
    var _this = this;
    this.charts["asd"] = echarts.init(document.getElementById("chart2020"));
    var option = {
      color: ["#F56C6C"],
      legend: {},
      tooltip: {},
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          return `${params.map((item) => {
            return (
              Format("YYYY-mm-dd HH:MM:SS", new Date(item.value.time)) +
              "<br/>单位净值" +
              item.value.nav +
              "<br/>涨跌幅" +
              item.value.percentage +
              "%"
            );
          })}`;
        },
      },
      dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
        // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        // 完成映射，参见后文。
        dimensions: ["time", "percentage"],
        source: [
          { time: 0, nav: 1, percentage: 1 },
          { time: 1, nav: 2, percentage:2 },
          { time: 2, nav: 3, percentage: 3 },
          { time: 3, nav: 4, percentage: 5 },
          { time: 4, nav: 5, percentage: 6 },
          { time: 5, nav: 6, percentage:7 },
          { time: 6, nav: 7, percentage: 8 },
          { time: 7, nav: 8, percentage: -9},
          { time: 8, nav: 9, percentage: 10 },
          { time: 9, nav: 10, percentage: 12 },
        ],
      },
      yAxis: { type: "value" },
      xAxis: { type: "category" },
      series: [
        {
          type: "line",
          lineStyle: {
            width: 2, // 折线宽度
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: "#0000", // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: "#0000", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "green", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: "#0000", // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: "#0000", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "green", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    };
    this.charts["asd"].setOption(option);
    // setTimeout(() => {
    //         this.chart.resize();
    //     }, 200);
    window.addEventListener("resize", function () {
      _this.charts["asd"].resize();
    });
  },
};
</script>
<style scoped>
#ct {
  width: 100%;
  height: 100%;
}
#ct .chart {
  width: 100%;
  height: 100%;
}
</style>
